<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
	<th:block th:replace="fragment/head"/>
</head>

<body class="page-header-fixed page-sidebar-closed-hide-logo page-container-bg-solid page-content-white page-sidebar-closed">
<th:block th:replace="fragment/header"/>
<!-- BEGIN CONTAINER -->
<div class="page-container">
	<!-- BEGIN SIDEBAR -->
	<th:block th:replace="fragment/sidebar"/>
	<!-- BEGIN CONTENT -->
	<div class="page-content-wrapper">
		<!-- BEGIN CONTENT BODY -->
		<div class="page-content">
			<!-- BEGIN PAGE BAR -->
			<div class="page-bar">
				<ul class="page-breadcrumb">
					<li><a href="index.html" class='msg_home'>主页</a> <i class="fa fa-circle"></i></li>
					<li><span class='msg_title_attr'>Current Page</span></li>
				</ul>
			</div>
			<!-- END PAGE BAR -->
			<!-- BEGIN PAGE TITLE-->
			<h1 class="page-title">
				<span class="msg_title_attr">   PageTitle</span>
				<small class="msg_subtitle_attr">sub title</small>
			</h1>
			<!-- END PAGE TITLE-->
			<!-- BEGIN main content -->
			<div class="row">
				<!-- BEGIN ===========page level content============= -->
				<div class="col-lg-6 col-xs-12 col-sm-12">
					<div class="portlet light tasks-widget bordered">
						<div class="portlet-title">
							<div class="caption">
								<i class="icon-share font-dark hide"></i>
								<span class="caption-subject font-dark bold uppercase">属性 1</span>
								<span class="caption-helper"></span>
							</div>
							<div class="actions">
								<a href="javascript:;" class="btn btn-sm btn-circle green">
									<i class="fa fa-plus"></i> 添加
								</a>
								<a href="javascript:;" class="btn btn-sm btn-circle red">
									<i class="fa fa-trash"></i> 删除
								</a>
							</div>
						</div>
						<div class="portlet-body">
							<div class="task-content">
								<div class="scroller scroll-list scroll-list-editable">
									<!-- START TASK LIST -->
									<ul class="task-list">
										<li class="list-header">
											<div class="task-checkbox">
												<label class="mt-checkbox mt-checkbox-single mt-checkbox-outline">
													<input type="checkbox" class="checkboxes" value="1" />
													<span></span>
												</label>
											</div>
											<div class="task-title row">
												<span class="col-xs-5 "> 属性值 </span>
												<span class="col-xs-5 ">属性编码</span>
											</div>
										</li>
										<li>
											<input class="hidden" name = 'id'/>
											<input class="hidden" name = 'attributeId' value="1"/>
											<div class="task-checkbox">
												<label class="mt-checkbox mt-checkbox-single mt-checkbox-outline">
													<input type="checkbox" class="checkboxes" value="1" />
													<span></span>
												</label>
											</div>
											<div class="task-value row">
												<div class="col-sm-5">
													<div class="input-group">
														<input type="text" class="form-control" name="attributeName" maxlength="20" placeholder="">
													</div>
												</div>
												<div class="col-sm-5 ">
													<div class="input-group">
														<input type="text" class="form-control" name="attributeCode" maxlength="20" placeholder="">
													</div>
												</div>
											</div>
										</li>
									</ul>
									<!-- END START TASK LIST -->
								</div>
							</div>
							<div class="task-footer">&nbsp;</div>
						</div>
					</div>
				</div>
				<div class="col-lg-6 col-xs-12 col-sm-12">
					<div class="portlet light tasks-widget bordered">
						<div class="portlet-title">
							<div class="caption">
								<i class="icon-share font-dark hide"></i>
								<span class="caption-subject font-dark bold uppercase">属性 2</span>
								<span class="caption-helper"></span>
							</div>
							<div class="actions">
								<a href="javascript:;" class="btn btn-sm btn-circle green">
									<i class="fa fa-plus"></i> 添加
								</a>
								<a href="javascript:;" class="btn btn-sm btn-circle red">
									<i class="fa fa-trash"></i> 删除
								</a>
							</div>
						</div>
						<div class="portlet-body">
							<div class="task-content">
								<div class="scroller scroll-list" data-always-visible="1" data-rail-visible1="1">
									<!-- START TASK LIST -->
									<ul class="task-list">
										<li class="list-header">
											<div class="task-checkbox">
												<label class="mt-checkbox mt-checkbox-single mt-checkbox-outline">
													<input type="checkbox" class="checkboxes" value="1" />
													<span></span>
												</label>
											</div>
											<div class="task-title row">
												<span class="col-xs-5 "> 属性值 </span>
												<span class="col-xs-5 ">属性编码</span>
											</div>
										</li>
										<li>
											<div class="task-checkbox">
												<label class="mt-checkbox mt-checkbox-single mt-checkbox-outline">
													<input type="checkbox" class="checkboxes" value="1" />
													<span></span>
												</label>
											</div>
											<div class="task-title row">
												<span class="col-xs-5 "> 蓝色 </span>
												<span class="col-xs-5 "> BLUE01</span>
											</div>
											<div class="task-config">
												<div class="task-config-btn btn-group">
													<a class="btn btn-sm default" href="javascript:;" data-toggle="dropdown" data-hover="dropdown" data-close-others="true">
														<i class="fa fa-cog"></i>
														<i class="fa fa-angle-down"></i>
													</a>
													<ul class="dropdown-menu pull-right">
														<li>
															<a href="javascript:;">
																<i class="fa fa-pencil"></i> 修改 </a>
														</li>
														<li>
															<a href="javascript:;">
																<i class="fa fa-trash-o"></i> 删除 </a>
														</li>
													</ul>
												</div>
											</div>
										</li>
										<li>
											<div class="task-checkbox">
												<label class="mt-checkbox mt-checkbox-single mt-checkbox-outline">
													<input type="checkbox" class="checkboxes" value="1" />
													<span></span>
												</label>
											</div>
											<div class="task-title row">
												<span class="col-xs-5 "> 黑色 </span>
												<span class="col-xs-5 "> BLACK01</span>
											</div>
											<div class="task-config">
												<div class="task-config-btn btn-group">
													<a class="btn btn-sm default" href="javascript:;" data-toggle="dropdown" data-hover="dropdown" data-close-others="true">
														<i class="fa fa-cog"></i>
														<i class="fa fa-angle-down"></i>
													</a>
													<ul class="dropdown-menu pull-right">
														<li>
															<a href="javascript:;">
																<i class="fa fa-pencil"></i> 修改 </a>
														</li>
														<li>
															<a href="javascript:;">
																<i class="fa fa-trash-o"></i> 删除 </a>
														</li>
													</ul>
												</div>
											</div>
										</li>
										<li>
											<div class="task-checkbox">
												<label class="mt-checkbox mt-checkbox-single mt-checkbox-outline">
													<input type="checkbox" class="checkboxes" value="1" />
													<span></span>
												</label>
											</div>
											<div class="task-title row">
												<span class="col-xs-5 "> 红色 </span>
												<span class="col-xs-5 "> RED01</span>
											</div>
											<div class="task-config">
												<div class="task-config-btn btn-group">
													<a class="btn btn-sm default" href="javascript:;" data-toggle="dropdown" data-hover="dropdown" data-close-others="true">
														<i class="fa fa-cog"></i>
														<i class="fa fa-angle-down"></i>
													</a>
													<ul class="dropdown-menu pull-right">
														<li>
															<a href="javascript:;">
																<i class="fa fa-pencil"></i> 修改 </a>
														</li>
														<li>
															<a href="javascript:;">
																<i class="fa fa-trash-o"></i> 删除 </a>
														</li>
													</ul>
												</div>
											</div>
										</li>
										<li>
											<div class="task-checkbox">
												<label class="mt-checkbox mt-checkbox-single mt-checkbox-outline">
													<input type="checkbox" class="checkboxes" value="1" />
													<span></span>
												</label>
											</div>
											<div class="task-title">
												<span class="task-title-sp"> Hold An Interview for Marketing Manager Position </span>
												<span class="label label-sm label-danger">Marketing</span>
											</div>
											<div class="task-config">
												<div class="task-config-btn btn-group">
													<a class="btn btn-sm default" href="javascript:;" data-toggle="dropdown" data-hover="dropdown" data-close-others="true">
														<i class="fa fa-cog"></i>
														<i class="fa fa-angle-down"></i>
													</a>
													<ul class="dropdown-menu pull-right">

														<li>
															<a href="javascript:;">
																<i class="fa fa-pencil"></i> Edit </a>
														</li>
														<li>
															<a href="javascript:;">
																<i class="fa fa-trash-o"></i> Cancel </a>
														</li>
													</ul>
												</div>
											</div>
										</li>
										<li>
											<div class="task-checkbox">
												<label class="mt-checkbox mt-checkbox-single mt-checkbox-outline">
													<input type="checkbox" class="checkboxes" value="1" />
													<span></span>
												</label>
											</div>
											<div class="task-title">
												<span class="task-title-sp"> AirAsia Intranet System Project Internal Meeting </span>
												<span class="label label-sm label-success">AirAsia</span>
												<span class="task-bell">
																				<i class="fa fa-bell-o"></i>
																			</span>
											</div>
											<div class="task-config">
												<div class="task-config-btn btn-group">
													<a class="btn btn-sm default" href="javascript:;" data-toggle="dropdown" data-hover="dropdown" data-close-others="true">
														<i class="fa fa-cog"></i>
														<i class="fa fa-angle-down"></i>
													</a>
													<ul class="dropdown-menu pull-right">
														<li>
															<a href="javascript:;">
																<i class="fa fa-check"></i> Complete </a>
														</li>
														<li>
															<a href="javascript:;">
																<i class="fa fa-pencil"></i> Edit </a>
														</li>
														<li>
															<a href="javascript:;">
																<i class="fa fa-trash-o"></i> Cancel </a>
														</li>
													</ul>
												</div>
											</div>
										</li>
										<li>
											<div class="task-checkbox">
												<label class="mt-checkbox mt-checkbox-single mt-checkbox-outline">
													<input type="checkbox" class="checkboxes" value="1" />
													<span></span>
												</label>
											</div>
											<div class="task-title">
												<span class="task-title-sp"> Technical Management Meeting </span>
												<span class="label label-sm label-warning">Company</span>
											</div>
											<div class="task-config">
												<div class="task-config-btn btn-group">
													<a class="btn btn-sm default" href="javascript:;" data-toggle="dropdown" data-hover="dropdown" data-close-others="true">
														<i class="fa fa-cog"></i>
														<i class="fa fa-angle-down"></i>
													</a>
													<ul class="dropdown-menu pull-right">
														<li>
															<a href="javascript:;">
																<i class="fa fa-check"></i> Complete </a>
														</li>
														<li>
															<a href="javascript:;">
																<i class="fa fa-pencil"></i> Edit </a>
														</li>
														<li>
															<a href="javascript:;">
																<i class="fa fa-trash-o"></i> Cancel </a>
														</li>
													</ul>
												</div>
											</div>
										</li>
										<li>
											<div class="task-checkbox">
												<label class="mt-checkbox mt-checkbox-single mt-checkbox-outline">
													<input type="checkbox" class="checkboxes" value="1" />
													<span></span>
												</label>
											</div>
											<div class="task-title">
												<span class="task-title-sp"> Kick-off Company CRM Mobile App Development </span>
												<span class="label label-sm label-info">Internal Products</span>
											</div>
											<div class="task-config">
												<div class="task-config-btn btn-group">
													<a class="btn btn-sm default" href="javascript:;" data-toggle="dropdown" data-hover="dropdown" data-close-others="true">
														<i class="fa fa-cog"></i>
														<i class="fa fa-angle-down"></i>
													</a>
													<ul class="dropdown-menu pull-right">
														<li>
															<a href="javascript:;">
																<i class="fa fa-check"></i> Complete </a>
														</li>
														<li>
															<a href="javascript:;">
																<i class="fa fa-pencil"></i> Edit </a>
														</li>
														<li>
															<a href="javascript:;">
																<i class="fa fa-trash-o"></i> Cancel </a>
														</li>
													</ul>
												</div>
											</div>
										</li>
										<li>
											<div class="task-checkbox">
												<label class="mt-checkbox mt-checkbox-single mt-checkbox-outline">
													<input type="checkbox" class="checkboxes" value="1" />
													<span></span>
												</label>
											</div>
											<div class="task-title">
												<span class="task-title-sp"> Prepare Commercial Offer For SmartVision Website Rewamp </span>
												<span class="label label-sm label-danger">SmartVision</span>
											</div>
											<div class="task-config">
												<div class="task-config-btn btn-group">
													<a class="btn btn-sm default" href="javascript:;" data-toggle="dropdown" data-hover="dropdown" data-close-others="true">
														<i class="fa fa-cog"></i>
														<i class="fa fa-angle-down"></i>
													</a>
													<ul class="dropdown-menu pull-right">
														<li>
															<a href="javascript:;">
																<i class="fa fa-check"></i> Complete </a>
														</li>
														<li>
															<a href="javascript:;">
																<i class="fa fa-pencil"></i> Edit </a>
														</li>
														<li>
															<a href="javascript:;">
																<i class="fa fa-trash-o"></i> Cancel </a>
														</li>
													</ul>
												</div>
											</div>
										</li>
										<li>
											<div class="task-checkbox">
												<label class="mt-checkbox mt-checkbox-single mt-checkbox-outline">
													<input type="checkbox" class="checkboxes" value="1" />
													<span></span>
												</label>
											</div>
											<div class="task-title">
												<span class="task-title-sp"> Sign-Off The Comercial Agreement With AutoSmart </span>
												<span class="label label-sm label-default">AutoSmart</span>
												<span class="task-bell">
																				<i class="fa fa-bell-o"></i>
																			</span>
											</div>
											<div class="task-config">
												<div class="task-config-btn btn-group dropup">
													<a class="btn btn-sm default" href="javascript:;" data-toggle="dropdown" data-hover="dropdown" data-close-others="true">
														<i class="fa fa-cog"></i>
														<i class="fa fa-angle-down"></i>
													</a>
													<ul class="dropdown-menu pull-right">
														<li>
															<a href="javascript:;">
																<i class="fa fa-check"></i> Complete </a>
														</li>
														<li>
															<a href="javascript:;">
																<i class="fa fa-pencil"></i> Edit </a>
														</li>
														<li>
															<a href="javascript:;">
																<i class="fa fa-trash-o"></i> Cancel </a>
														</li>
													</ul>
												</div>
											</div>
										</li>
										<li>
											<div class="task-checkbox">
												<label class="mt-checkbox mt-checkbox-single mt-checkbox-outline">
													<input type="checkbox" class="checkboxes" value="1" />
													<span></span>
												</label>
											</div>
											<div class="task-title">
												<span class="task-title-sp"> Company Staff Meeting </span>
												<span class="label label-sm label-success">Cruise</span>
												<span class="task-bell">
																				<i class="fa fa-bell-o"></i>
																			</span>
											</div>
											<div class="task-config">
												<div class="task-config-btn btn-group dropup">
													<a class="btn btn-sm default" href="javascript:;" data-toggle="dropdown" data-hover="dropdown" data-close-others="true">
														<i class="fa fa-cog"></i>
														<i class="fa fa-angle-down"></i>
													</a>
													<ul class="dropdown-menu pull-right">
														<li>
															<a href="javascript:;">
																<i class="fa fa-check"></i> Complete </a>
														</li>
														<li>
															<a href="javascript:;">
																<i class="fa fa-pencil"></i> Edit </a>
														</li>
														<li>
															<a href="javascript:;">
																<i class="fa fa-trash-o"></i> Cancel </a>
														</li>
													</ul>
												</div>
											</div>
										</li>
										<li class="last-line">
											<div class="task-checkbox">
												<label class="mt-checkbox mt-checkbox-single mt-checkbox-outline">
													<input type="checkbox" class="checkboxes" value="1" />
													<span></span>
												</label>
											</div>
											<div class="task-title">
												<span class="task-title-sp"> KeenThemes Investment Discussion </span>
												<span class="label label-sm label-warning">KeenThemes </span>
											</div>
											<div class="task-config">
												<div class="task-config-btn btn-group dropup">
													<a class="btn btn-sm default" href="javascript:;" data-toggle="dropdown" data-hover="dropdown" data-close-others="true">
														<i class="fa fa-cog"></i>
														<i class="fa fa-angle-down"></i>
													</a>
													<ul class="dropdown-menu pull-right">
														<li>
															<a href="javascript:;">
																<i class="fa fa-check"></i> Complete </a>
														</li>
														<li>
															<a href="javascript:;">
																<i class="fa fa-pencil"></i> Edit </a>
														</li>
														<li>
															<a href="javascript:;">
																<i class="fa fa-trash-o"></i> Cancel </a>
														</li>
													</ul>
												</div>
											</div>
										</li>
									</ul>
									<!-- END START TASK LIST -->
								</div>
							</div>
							<div class="task-footer">
								&nbsp;
							</div>
						</div>
					</div>
				</div>
				<div class="col-lg-6 col-xs-12 col-sm-12">
					<div class="portlet light tasks-widget bordered">
						<div class="portlet-title">
							<div class="caption">
								<i class="icon-share font-dark hide"></i>
								<span class="caption-subject font-dark bold uppercase">属性 3</span>
								<span class="caption-helper"></span>
							</div>
							<div class="actions">
								<a href="javascript:;" class="btn btn-sm btn-circle green">
									<i class="fa fa-plus"></i> 添加
								</a>
								<a href="javascript:;" class="btn btn-sm btn-circle red">
									<i class="fa fa-trash"></i> 删除
								</a>
							</div>
						</div>
						<div class="portlet-body">
							<div class="task-content">
								<div class="scroller scroll-list" data-always-visible="1" data-rail-visible1="1">
									<!-- START TASK LIST -->
									<ul class="task-list">
										<li class="list-header">
											<div class="task-checkbox">
												<label class="mt-checkbox mt-checkbox-single mt-checkbox-outline">
													<input type="checkbox" class="checkboxes" value="1" />
													<span></span>
												</label>
											</div>
											<div class="task-title row">
												<span class="col-xs-5 "> 属性值 </span>
												<span class="col-xs-5 ">属性编码</span>
											</div>
										</li>
										<li>
											<div class="task-checkbox">
												<label class="mt-checkbox mt-checkbox-single mt-checkbox-outline">
													<input type="checkbox" class="checkboxes" value="1" />
													<span></span>
												</label>
											</div>
											<div class="task-title row">
												<span class="col-xs-5 "> 蓝色 </span>
												<span class="col-xs-5 "> BLUE01</span>
											</div>
											<div class="task-config">
												<div class="task-config-btn btn-group">
													<a class="btn btn-sm default" href="javascript:;" data-toggle="dropdown" data-hover="dropdown" data-close-others="true">
														<i class="fa fa-cog"></i>
														<i class="fa fa-angle-down"></i>
													</a>
													<ul class="dropdown-menu pull-right">
														<li>
															<a href="javascript:;">
																<i class="fa fa-pencil"></i> 修改 </a>
														</li>
														<li>
															<a href="javascript:;">
																<i class="fa fa-trash-o"></i> 删除 </a>
														</li>
													</ul>
												</div>
											</div>
										</li>
										<li>
											<div class="task-checkbox">
												<label class="mt-checkbox mt-checkbox-single mt-checkbox-outline">
													<input type="checkbox" class="checkboxes" value="1" />
													<span></span>
												</label>
											</div>
											<div class="task-title row">
												<span class="col-xs-5 "> 黑色 </span>
												<span class="col-xs-5 "> BLACK01</span>
											</div>
											<div class="task-config">
												<div class="task-config-btn btn-group">
													<a class="btn btn-sm default" href="javascript:;" data-toggle="dropdown" data-hover="dropdown" data-close-others="true">
														<i class="fa fa-cog"></i>
														<i class="fa fa-angle-down"></i>
													</a>
													<ul class="dropdown-menu pull-right">
														<li>
															<a href="javascript:;">
																<i class="fa fa-pencil"></i> 修改 </a>
														</li>
														<li>
															<a href="javascript:;">
																<i class="fa fa-trash-o"></i> 删除 </a>
														</li>
													</ul>
												</div>
											</div>
										</li>
										<li>
											<div class="task-checkbox">
												<label class="mt-checkbox mt-checkbox-single mt-checkbox-outline">
													<input type="checkbox" class="checkboxes" value="1" />
													<span></span>
												</label>
											</div>
											<div class="task-title row">
												<span class="col-xs-5 "> 红色 </span>
												<span class="col-xs-5 "> RED01</span>
											</div>
											<div class="task-config">
												<div class="task-config-btn btn-group">
													<a class="btn btn-sm default" href="javascript:;" data-toggle="dropdown" data-hover="dropdown" data-close-others="true">
														<i class="fa fa-cog"></i>
														<i class="fa fa-angle-down"></i>
													</a>
													<ul class="dropdown-menu pull-right">
														<li>
															<a href="javascript:;">
																<i class="fa fa-pencil"></i> 修改 </a>
														</li>
														<li>
															<a href="javascript:;">
																<i class="fa fa-trash-o"></i> 删除 </a>
														</li>
													</ul>
												</div>
											</div>
										</li>
										<li>
											<div class="task-checkbox">
												<label class="mt-checkbox mt-checkbox-single mt-checkbox-outline">
													<input type="checkbox" class="checkboxes" value="1" />
													<span></span>
												</label>
											</div>
											<div class="task-title">
												<span class="task-title-sp"> Hold An Interview for Marketing Manager Position </span>
												<span class="label label-sm label-danger">Marketing</span>
											</div>
											<div class="task-config">
												<div class="task-config-btn btn-group">
													<a class="btn btn-sm default" href="javascript:;" data-toggle="dropdown" data-hover="dropdown" data-close-others="true">
														<i class="fa fa-cog"></i>
														<i class="fa fa-angle-down"></i>
													</a>
													<ul class="dropdown-menu pull-right">

														<li>
															<a href="javascript:;">
																<i class="fa fa-pencil"></i> Edit </a>
														</li>
														<li>
															<a href="javascript:;">
																<i class="fa fa-trash-o"></i> Cancel </a>
														</li>
													</ul>
												</div>
											</div>
										</li>
										<li>
											<div class="task-checkbox">
												<label class="mt-checkbox mt-checkbox-single mt-checkbox-outline">
													<input type="checkbox" class="checkboxes" value="1" />
													<span></span>
												</label>
											</div>
											<div class="task-title">
												<span class="task-title-sp"> AirAsia Intranet System Project Internal Meeting </span>
												<span class="label label-sm label-success">AirAsia</span>
												<span class="task-bell">
																				<i class="fa fa-bell-o"></i>
																			</span>
											</div>
											<div class="task-config">
												<div class="task-config-btn btn-group">
													<a class="btn btn-sm default" href="javascript:;" data-toggle="dropdown" data-hover="dropdown" data-close-others="true">
														<i class="fa fa-cog"></i>
														<i class="fa fa-angle-down"></i>
													</a>
													<ul class="dropdown-menu pull-right">
														<li>
															<a href="javascript:;">
																<i class="fa fa-check"></i> Complete </a>
														</li>
														<li>
															<a href="javascript:;">
																<i class="fa fa-pencil"></i> Edit </a>
														</li>
														<li>
															<a href="javascript:;">
																<i class="fa fa-trash-o"></i> Cancel </a>
														</li>
													</ul>
												</div>
											</div>
										</li>
										<li>
											<div class="task-checkbox">
												<label class="mt-checkbox mt-checkbox-single mt-checkbox-outline">
													<input type="checkbox" class="checkboxes" value="1" />
													<span></span>
												</label>
											</div>
											<div class="task-title">
												<span class="task-title-sp"> Technical Management Meeting </span>
												<span class="label label-sm label-warning">Company</span>
											</div>
											<div class="task-config">
												<div class="task-config-btn btn-group">
													<a class="btn btn-sm default" href="javascript:;" data-toggle="dropdown" data-hover="dropdown" data-close-others="true">
														<i class="fa fa-cog"></i>
														<i class="fa fa-angle-down"></i>
													</a>
													<ul class="dropdown-menu pull-right">
														<li>
															<a href="javascript:;">
																<i class="fa fa-check"></i> Complete </a>
														</li>
														<li>
															<a href="javascript:;">
																<i class="fa fa-pencil"></i> Edit </a>
														</li>
														<li>
															<a href="javascript:;">
																<i class="fa fa-trash-o"></i> Cancel </a>
														</li>
													</ul>
												</div>
											</div>
										</li>
										<li>
											<div class="task-checkbox">
												<label class="mt-checkbox mt-checkbox-single mt-checkbox-outline">
													<input type="checkbox" class="checkboxes" value="1" />
													<span></span>
												</label>
											</div>
											<div class="task-title">
												<span class="task-title-sp"> Kick-off Company CRM Mobile App Development </span>
												<span class="label label-sm label-info">Internal Products</span>
											</div>
											<div class="task-config">
												<div class="task-config-btn btn-group">
													<a class="btn btn-sm default" href="javascript:;" data-toggle="dropdown" data-hover="dropdown" data-close-others="true">
														<i class="fa fa-cog"></i>
														<i class="fa fa-angle-down"></i>
													</a>
													<ul class="dropdown-menu pull-right">
														<li>
															<a href="javascript:;">
																<i class="fa fa-check"></i> Complete </a>
														</li>
														<li>
															<a href="javascript:;">
																<i class="fa fa-pencil"></i> Edit </a>
														</li>
														<li>
															<a href="javascript:;">
																<i class="fa fa-trash-o"></i> Cancel </a>
														</li>
													</ul>
												</div>
											</div>
										</li>
										<li>
											<div class="task-checkbox">
												<label class="mt-checkbox mt-checkbox-single mt-checkbox-outline">
													<input type="checkbox" class="checkboxes" value="1" />
													<span></span>
												</label>
											</div>
											<div class="task-title">
												<span class="task-title-sp"> Prepare Commercial Offer For SmartVision Website Rewamp </span>
												<span class="label label-sm label-danger">SmartVision</span>
											</div>
											<div class="task-config">
												<div class="task-config-btn btn-group">
													<a class="btn btn-sm default" href="javascript:;" data-toggle="dropdown" data-hover="dropdown" data-close-others="true">
														<i class="fa fa-cog"></i>
														<i class="fa fa-angle-down"></i>
													</a>
													<ul class="dropdown-menu pull-right">
														<li>
															<a href="javascript:;">
																<i class="fa fa-check"></i> Complete </a>
														</li>
														<li>
															<a href="javascript:;">
																<i class="fa fa-pencil"></i> Edit </a>
														</li>
														<li>
															<a href="javascript:;">
																<i class="fa fa-trash-o"></i> Cancel </a>
														</li>
													</ul>
												</div>
											</div>
										</li>
										<li>
											<div class="task-checkbox">
												<label class="mt-checkbox mt-checkbox-single mt-checkbox-outline">
													<input type="checkbox" class="checkboxes" value="1" />
													<span></span>
												</label>
											</div>
											<div class="task-title">
												<span class="task-title-sp"> Sign-Off The Comercial Agreement With AutoSmart </span>
												<span class="label label-sm label-default">AutoSmart</span>
												<span class="task-bell">
																				<i class="fa fa-bell-o"></i>
																			</span>
											</div>
											<div class="task-config">
												<div class="task-config-btn btn-group dropup">
													<a class="btn btn-sm default" href="javascript:;" data-toggle="dropdown" data-hover="dropdown" data-close-others="true">
														<i class="fa fa-cog"></i>
														<i class="fa fa-angle-down"></i>
													</a>
													<ul class="dropdown-menu pull-right">
														<li>
															<a href="javascript:;">
																<i class="fa fa-check"></i> Complete </a>
														</li>
														<li>
															<a href="javascript:;">
																<i class="fa fa-pencil"></i> Edit </a>
														</li>
														<li>
															<a href="javascript:;">
																<i class="fa fa-trash-o"></i> Cancel </a>
														</li>
													</ul>
												</div>
											</div>
										</li>
										<li>
											<div class="task-checkbox">
												<label class="mt-checkbox mt-checkbox-single mt-checkbox-outline">
													<input type="checkbox" class="checkboxes" value="1" />
													<span></span>
												</label>
											</div>
											<div class="task-title">
												<span class="task-title-sp"> Company Staff Meeting </span>
												<span class="label label-sm label-success">Cruise</span>
												<span class="task-bell">
																				<i class="fa fa-bell-o"></i>
																			</span>
											</div>
											<div class="task-config">
												<div class="task-config-btn btn-group dropup">
													<a class="btn btn-sm default" href="javascript:;" data-toggle="dropdown" data-hover="dropdown" data-close-others="true">
														<i class="fa fa-cog"></i>
														<i class="fa fa-angle-down"></i>
													</a>
													<ul class="dropdown-menu pull-right">
														<li>
															<a href="javascript:;">
																<i class="fa fa-check"></i> Complete </a>
														</li>
														<li>
															<a href="javascript:;">
																<i class="fa fa-pencil"></i> Edit </a>
														</li>
														<li>
															<a href="javascript:;">
																<i class="fa fa-trash-o"></i> Cancel </a>
														</li>
													</ul>
												</div>
											</div>
										</li>
										<li class="last-line">
											<div class="task-checkbox">
												<label class="mt-checkbox mt-checkbox-single mt-checkbox-outline">
													<input type="checkbox" class="checkboxes" value="1" />
													<span></span>
												</label>
											</div>
											<div class="task-title">
												<span class="task-title-sp"> KeenThemes Investment Discussion </span>
												<span class="label label-sm label-warning">KeenThemes </span>
											</div>
											<div class="task-config">
												<div class="task-config-btn btn-group dropup">
													<a class="btn btn-sm default" href="javascript:;" data-toggle="dropdown" data-hover="dropdown" data-close-others="true">
														<i class="fa fa-cog"></i>
														<i class="fa fa-angle-down"></i>
													</a>
													<ul class="dropdown-menu pull-right">
														<li>
															<a href="javascript:;">
																<i class="fa fa-check"></i> Complete </a>
														</li>
														<li>
															<a href="javascript:;">
																<i class="fa fa-pencil"></i> Edit </a>
														</li>
														<li>
															<a href="javascript:;">
																<i class="fa fa-trash-o"></i> Cancel </a>
														</li>
													</ul>
												</div>
											</div>
										</li>
									</ul>
									<!-- END START TASK LIST -->
								</div>
							</div>
							<div class="task-footer">
								&nbsp;
							</div>
						</div>
					</div>
				</div>
				<div class="col-lg-6 col-xs-12 col-sm-12">
					<div class="portlet light tasks-widget bordered">
						<div class="portlet-title">
							<div class="caption">
								<i class="icon-share font-dark hide"></i>
								<span class="caption-subject font-dark bold uppercase">属性 4</span>
								<span class="caption-helper"></span>
							</div>
							<div class="actions">
								<a href="javascript:;" class="btn btn-sm btn-circle green">
									<i class="fa fa-plus"></i> 添加
								</a>
								<a href="javascript:;" class="btn btn-sm btn-circle red">
									<i class="fa fa-trash"></i> 删除
								</a>
							</div>
						</div>
						<div class="portlet-body">
							<div class="task-content">
								<div class="scroller scroll-list" data-always-visible="1" data-rail-visible1="1">
									<!-- START TASK LIST -->
									<ul class="task-list">
										<li class="list-header">
											<div class="task-checkbox">
												<label class="mt-checkbox mt-checkbox-single mt-checkbox-outline">
													<input type="checkbox" class="checkboxes" value="1" />
													<span></span>
												</label>
											</div>
											<div class="task-title row">
												<span class="col-xs-5 "> 属性值 </span>
												<span class="col-xs-5 ">属性编码</span>
											</div>
										</li>
										<li>
											<div class="task-checkbox">
												<label class="mt-checkbox mt-checkbox-single mt-checkbox-outline">
													<input type="checkbox" class="checkboxes" value="1" />
													<span></span>
												</label>
											</div>
											<div class="task-title row">
												<span class="col-xs-5 "> 蓝色 </span>
												<span class="col-xs-5 "> BLUE01</span>
											</div>
											<div class="task-config">
												<div class="task-config-btn btn-group">
													<a class="btn btn-sm default" href="javascript:;" data-toggle="dropdown" data-hover="dropdown" data-close-others="true">
														<i class="fa fa-cog"></i>
														<i class="fa fa-angle-down"></i>
													</a>
													<ul class="dropdown-menu pull-right">
														<li>
															<a href="javascript:;">
																<i class="fa fa-pencil"></i> 修改 </a>
														</li>
														<li>
															<a href="javascript:;">
																<i class="fa fa-trash-o"></i> 删除 </a>
														</li>
													</ul>
												</div>
											</div>
										</li>
										<li>
											<div class="task-checkbox">
												<label class="mt-checkbox mt-checkbox-single mt-checkbox-outline">
													<input type="checkbox" class="checkboxes" value="1" />
													<span></span>
												</label>
											</div>
											<div class="task-title row">
												<span class="col-xs-5 "> 黑色 </span>
												<span class="col-xs-5 "> BLACK01</span>
											</div>
											<div class="task-config">
												<div class="task-config-btn btn-group">
													<a class="btn btn-sm default" href="javascript:;" data-toggle="dropdown" data-hover="dropdown" data-close-others="true">
														<i class="fa fa-cog"></i>
														<i class="fa fa-angle-down"></i>
													</a>
													<ul class="dropdown-menu pull-right">
														<li>
															<a href="javascript:;">
																<i class="fa fa-pencil"></i> 修改 </a>
														</li>
														<li>
															<a href="javascript:;">
																<i class="fa fa-trash-o"></i> 删除 </a>
														</li>
													</ul>
												</div>
											</div>
										</li>
										<li>
											<div class="task-checkbox">
												<label class="mt-checkbox mt-checkbox-single mt-checkbox-outline">
													<input type="checkbox" class="checkboxes" value="1" />
													<span></span>
												</label>
											</div>
											<div class="task-title row">
												<span class="col-xs-5 "> 红色 </span>
												<span class="col-xs-5 "> RED01</span>
											</div>
											<div class="task-config">
												<div class="task-config-btn btn-group">
													<a class="btn btn-sm default" href="javascript:;" data-toggle="dropdown" data-hover="dropdown" data-close-others="true">
														<i class="fa fa-cog"></i>
														<i class="fa fa-angle-down"></i>
													</a>
													<ul class="dropdown-menu pull-right">
														<li>
															<a href="javascript:;">
																<i class="fa fa-pencil"></i> 修改 </a>
														</li>
														<li>
															<a href="javascript:;">
																<i class="fa fa-trash-o"></i> 删除 </a>
														</li>
													</ul>
												</div>
											</div>
										</li>
										<li>
											<div class="task-checkbox">
												<label class="mt-checkbox mt-checkbox-single mt-checkbox-outline">
													<input type="checkbox" class="checkboxes" value="1" />
													<span></span>
												</label>
											</div>
											<div class="task-title">
												<span class="task-title-sp"> Hold An Interview for Marketing Manager Position </span>
												<span class="label label-sm label-danger">Marketing</span>
											</div>
											<div class="task-config">
												<div class="task-config-btn btn-group">
													<a class="btn btn-sm default" href="javascript:;" data-toggle="dropdown" data-hover="dropdown" data-close-others="true">
														<i class="fa fa-cog"></i>
														<i class="fa fa-angle-down"></i>
													</a>
													<ul class="dropdown-menu pull-right">

														<li>
															<a href="javascript:;">
																<i class="fa fa-pencil"></i> Edit </a>
														</li>
														<li>
															<a href="javascript:;">
																<i class="fa fa-trash-o"></i> Cancel </a>
														</li>
													</ul>
												</div>
											</div>
										</li>
										<li>
											<div class="task-checkbox">
												<label class="mt-checkbox mt-checkbox-single mt-checkbox-outline">
													<input type="checkbox" class="checkboxes" value="1" />
													<span></span>
												</label>
											</div>
											<div class="task-title">
												<span class="task-title-sp"> AirAsia Intranet System Project Internal Meeting </span>
												<span class="label label-sm label-success">AirAsia</span>
												<span class="task-bell">
																				<i class="fa fa-bell-o"></i>
																			</span>
											</div>
											<div class="task-config">
												<div class="task-config-btn btn-group">
													<a class="btn btn-sm default" href="javascript:;" data-toggle="dropdown" data-hover="dropdown" data-close-others="true">
														<i class="fa fa-cog"></i>
														<i class="fa fa-angle-down"></i>
													</a>
													<ul class="dropdown-menu pull-right">
														<li>
															<a href="javascript:;">
																<i class="fa fa-check"></i> Complete </a>
														</li>
														<li>
															<a href="javascript:;">
																<i class="fa fa-pencil"></i> Edit </a>
														</li>
														<li>
															<a href="javascript:;">
																<i class="fa fa-trash-o"></i> Cancel </a>
														</li>
													</ul>
												</div>
											</div>
										</li>
										<li>
											<div class="task-checkbox">
												<label class="mt-checkbox mt-checkbox-single mt-checkbox-outline">
													<input type="checkbox" class="checkboxes" value="1" />
													<span></span>
												</label>
											</div>
											<div class="task-title">
												<span class="task-title-sp"> Technical Management Meeting </span>
												<span class="label label-sm label-warning">Company</span>
											</div>
											<div class="task-config">
												<div class="task-config-btn btn-group">
													<a class="btn btn-sm default" href="javascript:;" data-toggle="dropdown" data-hover="dropdown" data-close-others="true">
														<i class="fa fa-cog"></i>
														<i class="fa fa-angle-down"></i>
													</a>
													<ul class="dropdown-menu pull-right">
														<li>
															<a href="javascript:;">
																<i class="fa fa-check"></i> Complete </a>
														</li>
														<li>
															<a href="javascript:;">
																<i class="fa fa-pencil"></i> Edit </a>
														</li>
														<li>
															<a href="javascript:;">
																<i class="fa fa-trash-o"></i> Cancel </a>
														</li>
													</ul>
												</div>
											</div>
										</li>
										<li>
											<div class="task-checkbox">
												<label class="mt-checkbox mt-checkbox-single mt-checkbox-outline">
													<input type="checkbox" class="checkboxes" value="1" />
													<span></span>
												</label>
											</div>
											<div class="task-title">
												<span class="task-title-sp"> Kick-off Company CRM Mobile App Development </span>
												<span class="label label-sm label-info">Internal Products</span>
											</div>
											<div class="task-config">
												<div class="task-config-btn btn-group">
													<a class="btn btn-sm default" href="javascript:;" data-toggle="dropdown" data-hover="dropdown" data-close-others="true">
														<i class="fa fa-cog"></i>
														<i class="fa fa-angle-down"></i>
													</a>
													<ul class="dropdown-menu pull-right">
														<li>
															<a href="javascript:;">
																<i class="fa fa-check"></i> Complete </a>
														</li>
														<li>
															<a href="javascript:;">
																<i class="fa fa-pencil"></i> Edit </a>
														</li>
														<li>
															<a href="javascript:;">
																<i class="fa fa-trash-o"></i> Cancel </a>
														</li>
													</ul>
												</div>
											</div>
										</li>
										<li>
											<div class="task-checkbox">
												<label class="mt-checkbox mt-checkbox-single mt-checkbox-outline">
													<input type="checkbox" class="checkboxes" value="1" />
													<span></span>
												</label>
											</div>
											<div class="task-title">
												<span class="task-title-sp"> Prepare Commercial Offer For SmartVision Website Rewamp </span>
												<span class="label label-sm label-danger">SmartVision</span>
											</div>
											<div class="task-config">
												<div class="task-config-btn btn-group">
													<a class="btn btn-sm default" href="javascript:;" data-toggle="dropdown" data-hover="dropdown" data-close-others="true">
														<i class="fa fa-cog"></i>
														<i class="fa fa-angle-down"></i>
													</a>
													<ul class="dropdown-menu pull-right">
														<li>
															<a href="javascript:;">
																<i class="fa fa-check"></i> Complete </a>
														</li>
														<li>
															<a href="javascript:;">
																<i class="fa fa-pencil"></i> Edit </a>
														</li>
														<li>
															<a href="javascript:;">
																<i class="fa fa-trash-o"></i> Cancel </a>
														</li>
													</ul>
												</div>
											</div>
										</li>
										<li>
											<div class="task-checkbox">
												<label class="mt-checkbox mt-checkbox-single mt-checkbox-outline">
													<input type="checkbox" class="checkboxes" value="1" />
													<span></span>
												</label>
											</div>
											<div class="task-title">
												<span class="task-title-sp"> Sign-Off The Comercial Agreement With AutoSmart </span>
												<span class="label label-sm label-default">AutoSmart</span>
												<span class="task-bell">
																				<i class="fa fa-bell-o"></i>
																			</span>
											</div>
											<div class="task-config">
												<div class="task-config-btn btn-group dropup">
													<a class="btn btn-sm default" href="javascript:;" data-toggle="dropdown" data-hover="dropdown" data-close-others="true">
														<i class="fa fa-cog"></i>
														<i class="fa fa-angle-down"></i>
													</a>
													<ul class="dropdown-menu pull-right">
														<li>
															<a href="javascript:;">
																<i class="fa fa-check"></i> Complete </a>
														</li>
														<li>
															<a href="javascript:;">
																<i class="fa fa-pencil"></i> Edit </a>
														</li>
														<li>
															<a href="javascript:;">
																<i class="fa fa-trash-o"></i> Cancel </a>
														</li>
													</ul>
												</div>
											</div>
										</li>
										<li>
											<div class="task-checkbox">
												<label class="mt-checkbox mt-checkbox-single mt-checkbox-outline">
													<input type="checkbox" class="checkboxes" value="1" />
													<span></span>
												</label>
											</div>
											<div class="task-title">
												<span class="task-title-sp"> Company Staff Meeting </span>
												<span class="label label-sm label-success">Cruise</span>
												<span class="task-bell">
																				<i class="fa fa-bell-o"></i>
																			</span>
											</div>
											<div class="task-config">
												<div class="task-config-btn btn-group dropup">
													<a class="btn btn-sm default" href="javascript:;" data-toggle="dropdown" data-hover="dropdown" data-close-others="true">
														<i class="fa fa-cog"></i>
														<i class="fa fa-angle-down"></i>
													</a>
													<ul class="dropdown-menu pull-right">
														<li>
															<a href="javascript:;">
																<i class="fa fa-check"></i> Complete </a>
														</li>
														<li>
															<a href="javascript:;">
																<i class="fa fa-pencil"></i> Edit </a>
														</li>
														<li>
															<a href="javascript:;">
																<i class="fa fa-trash-o"></i> Cancel </a>
														</li>
													</ul>
												</div>
											</div>
										</li>
										<li class="last-line">
											<div class="task-checkbox">
												<label class="mt-checkbox mt-checkbox-single mt-checkbox-outline">
													<input type="checkbox" class="checkboxes" value="1" />
													<span></span>
												</label>
											</div>
											<div class="task-title">
												<span class="task-title-sp"> KeenThemes Investment Discussion </span>
												<span class="label label-sm label-warning">KeenThemes </span>
											</div>
											<div class="task-config">
												<div class="task-config-btn btn-group dropup">
													<a class="btn btn-sm default" href="javascript:;" data-toggle="dropdown" data-hover="dropdown" data-close-others="true">
														<i class="fa fa-cog"></i>
														<i class="fa fa-angle-down"></i>
													</a>
													<ul class="dropdown-menu pull-right">
														<li>
															<a href="javascript:;">
																<i class="fa fa-check"></i> Complete </a>
														</li>
														<li>
															<a href="javascript:;">
																<i class="fa fa-pencil"></i> Edit </a>
														</li>
														<li>
															<a href="javascript:;">
																<i class="fa fa-trash-o"></i> Cancel </a>
														</li>
													</ul>
												</div>
											</div>
										</li>
									</ul>
									<!-- END START TASK LIST -->
								</div>
							</div>
							<div class="task-footer">
								&nbsp;
							</div>
						</div>
					</div>
				</div>
				<!-- END   ===========page level content============= -->
			</div>
			<!-- END main content -->
			<!-- END CONTENT BODY -->
		</div>
		<!-- END CONTENT -->
	</div>
	<!-- END CONTAINER -->
</div>
<th:block th:replace="fragment/rear"/>
<!-- BEGIN Page level plugins -->
	<script src="resources/assets/global/plugins/jquery-slimscroll/jquery.slimscroll.min.js" type="text/javascript"></script>
<!-- END Page level plugins -->
<script type="text/javascript">
    jQuery(document).ready(function () {
		/*[+
		caryr.lang = [[${session.lang}]];
		+]*/
        //enable scroll
        $('.scroller').slimScroll({});

        $('.scroll-list-editable').each(function(i,e){
            $(e).find('.task-value input').on('focusout',function(){
                var li = $(this).closest('li');
                var attr = collectAttribute(li);
                if(attr.id){
                    createOrUpdate({
                        type:'PUT',
                        url:'api/attribute',
                        data:attr
                    });
                }else {
                    createOrUpdate({
                        type:'POST',
                        url:'api/attribute',
                        data:attr,
                        success:function(data){
                            alert(data.id);
                            attr.id = li.find('input[name="id"]').val(data.id);
                        }
                    });
                }
            })
        });

        function collectAttribute(li){
            var attr = {};
            attr.attributeCode = li.find('input[name="attributeCode"]').val();
            attr.attributeId = li.find('input[name="attributeId"]').val();
            attr.attributeName = li.find('input[name="attributeName"]').val();
            attr.id = li.find('input[name="id"]').val();
            return attr;
        }

        function createOrUpdate(option){
            var data = JSON.stringify(option.data);
            var type = option.type;
            var url = option.url;
            var success = function(data){
                if(option.success){
                    option.success(data);
                }
            };
            var error = function(XMLHttpRequest, textStatus, errorThrown) {
                var msgTxt = $.i18n.prop("msg_com_systemError");
                swal({
                    title:msgTxt,
                    text: "",
                    type: "error"
                },function() {

                });
            };

            $.ajax({
                type: type,
                url: url,
                dataType: "json",
                contentType: "application/json; charset=utf-8",
                traditional:true, //参数序列化的传统样式
                data:data,
                success:success,
                error:error
            });
        }
    });
</script>
</body>

</html>